<template>
    <!-- 第一页 -->
    <div class="page more">
        <!-- 标题栏 -->
        <ui-Header title="更多功能"></ui-Header>
            
        <!-- 这里是页面内容区 -->
        <div class="content">
            <img class="imgblock" src="/static/images/more_bg.jpg">
            <div class="tit line">更多功能</div>
            <table class="more-fn" @touchstart="addAtive" @touchend="removeAtive">
                <tr>
                    <td>
                        <span style="background:#5fcaf8;"> <i class="iconfont icon-gongluzhalan"></i> </span>
                        围栏
                    </td>
                     <td>
                        <span style="background:#f85e5e;"> <i class="iconfont icon-liwu"></i> </span>
                        奖励
                    </td>
                     <td>
                        <span style="background:#16c195;"> <i class="iconfont icon-zuji"></i> </span>
                        运动记步
                    </td>
                     <td>
                        <span style="background:#f7b55e;"> <i class="iconfont icon-lianxiren"></i> </span>
                        联系人
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="background:#198beb;"> <i class="iconfont icon-erji"></i> </span>
                        监听
                    </td>
                     <td>
                        <span style="background:#1dc5cf;"> <i class="iconfont icon-lanya"></i> </span>
                        蓝牙防丢
                    </td>
                     <td>
                        <span style="background:#5f96f1;"> <i class="iconfont icon-shoubiao"></i> </span>
                        找手表
                    </td>
                     <td>
                        <span style="background:#9b89ba;"> <i class="iconfont icon-clock"></i> </span>
                        闹铃
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="background:#5c97f5;"> <i class="iconfont icon-ertong01"></i> </span>
                        宝贝信息
                    </td>
                     <td>
                        <span style="background:#5ccdb9;"> <i class="iconfont icon-shangke"></i> </span>
                        上课设置
                    </td>
                     <td>
                        <span style="background:#60c8fb;"> <i class="iconfont icon-shishihuafeichaxun"></i> </span>
                        话费查询
                    </td>
                </tr>
            </table>
        </div>

        <ui-Nav></ui-Nav> 
    </div>
</template>

<script>
import $ from 'zepto'
import uiNav from '@/components/nav'
import uiHeader from '@/components/header'
export default {
  ready () {
    $.init()
    $('.more-fn td').on('touchstart', function () {
      $(this).addClass('active')
    }).on('touchend', function () {
      $(this).removeClass('active')
    })
    $(document).on('touchend', function () {
      $('.more-fn td').removeClass('active')
    })
  },
  methods: {
    back () {
      window.history.back(-1)
    },
    addAtive (e) {
      var tg = (e.target.tagName !== 'TD' ? $(e.target).parents('td') : $(e.target))
      $(tg).addClass('active')
    },
    removeAtive (e) {
      var tg = (e.target.tagName !== 'TD' ? $(e.target).parents('td') : $(e.target))
      $(tg).removeClass('active')
    }
  },
  name: 'more',
  data () {
    return {
      msg: 'Welcome to Vue and sui'
    }
  },
  components: {
    uiNav,
    uiHeader
  }
}
</script>
<style  lang="less">
.more {
  .tit { margin-bottom:0.4rem; background:#eaeaea; color:#666; font-size:0.8rem; line-height:1.7rem; text-indent:0.7rem;}
  td{ font-size:0.6rem; padding-bottom:0.4rem;}
  td i{ color:#fff; font-size:1.2rem; line-height:2rem;}
  td span{ display:block; margin:0.8rem auto 0.6rem; width:2rem; height:2rem; border-radius:6px;}
  td.active{ background:#dedede;}
}
</style>
